$(function () {
    let pageParams = {
        page: 0,
        limit: 10,
        hasMore: true,
    }
    renderNews().then(() => {
        lazyLoad()
    })
    function renderNews() {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: `/api/getNews?page=${pageParams.page}&limit=${pageParams.limit}`,
                type: 'get',
                success: res => {
                    if (res.code == 200) {
                        let [domT, domB] = [``, ``]
                        res.result = res.result || []
                        if (res.result.length == 0) {
                            pageParams.hasMore = false
                        }
                        res.result.forEach(item => {
                            if (item.isTop == 1) {
                                domT += `
                    <div class="news_card">
                        <div class="card " >
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="card-body">
                                        <h5 class="card-title">${item.title}</h5>
                                        <p class="card-date"><small class="text-muted">发布日期:${item.releaseDate}</small></p>
                                        <p class="card-text">${item.abstract}</p>
                                        <div class="card_url" data-id="${item.id}">
                                            <img src="/static/img/read_more.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <img src="${item.coverSrc}" style="width:100%;height:254px" alt="..." >
                                </div>
                                
                            </div>
                        </div>
                    </div>
                        `
                            } else {
                                domB += `
                    <div class="col-md-4">
                        <div class="my_card card_url"  data-id="${item.id}">
                            <div class="card_img">
                                <img src="${item.coverSrc}" alt="">
                            </div>
                            <div class="card_title black_text">
                                ${item.title}
                            </div>
                            <div class="card_date text-muted">
                                <small class="text-muted">${item.releaseDate}</small>
                            </div>
                        </div>
                    </div>
                    `
                            }

                        })
                        $(".scroll_box .news_top").append(domT)
                        $(".scroll_box .news_bot").append(domB)
                        $(".card_url").click(function () {
                            let id = $(this).data("id")
                            location.href = "./newsDetail.html?id=" + id
                        })
                        changeLoadStatus(false)
                        resolve()
                    }
                }
            })
        })
    }
    function lazyLoad() {
        $(".lazy_load").click(function () {
            if(!pageParams.hasMore){return}
            pageParams.page++
            changeLoadStatus(true)
            renderNews()
        })
        $(".lazy_load").hover(function () {
            $(this).css("background-color","#825AA5")
            $(this).css("color","#fff")
        },function(){
            $(this).css("background-color","#F8F7FC")
            $(this).css("color","#825AA5")

        })
    }
    function changeLoadStatus(flag) {
        let $lazy = $(".lazy_load")
        let $tips = $lazy.children(".sp-tips")
        let $wave = $lazy.children(".sp-wave")
        if (!pageParams.hasMore) {
            $tips.css("display", "inline-block")
            $wave.css("display", "none")
            $tips.text("没有更多啦~")
            return
        }
        if (flag) {
            $tips.css("display", "none")
            $wave.css("display", "inline-block")
        } else {
            $tips.css("display", "inline-block")
            $wave.css("display", "none")
        }
    }
})